Day 24: 從 JSON 到 API，優化 i18n 資料加載

2024 iThome 鐵人賽

DAY 24

JavaScript

從PM到前端開發：我的React作品集之旅系列第 24 篇

16th鐵人賽

carolcheng

2024-09-24 14:31:05

111 瀏覽

分享至

在前一篇文章中，我們專注於後端部分，展示了如何將多語言資料從本地 JSON 檔案轉為 API 形式管理，並將其部署到 Vercel。今天，我們將接著這個基礎，探討如何在前端整合這個 API，讓 React 應用能夠動態地從伺服器獲取翻譯資料，從而提升我們專案的 i18n 支援。

i18next-http-backend

i18next-http-backend 是 i18next 的一個後端插件，允許你透過 HTTP 請求從伺服器端動態載入翻譯資料，而不是本地 JSON 檔案。這個插件非常適合當多語言資料隨著專案的規模變大，而需要集中管理並從伺服器動態獲取的場景。

具體來說，i18next-http-backend 提供了一個便捷的方式來讓你的前端應用透過 API 請求獲取翻譯資料，並且無需手動撰寫 HTTP 請求邏輯。它與 i18next 無縫整合，並自動處理翻譯資料的載入和語言變更。

核心特點：

從伺服器獲取翻譯資料：透過 HTTP 請求來動態載入語言檔案。
自動快取：支援快取機制，當翻譯檔案沒有變更時，避免多次重複載入。
集成簡單：與 i18next 無縫結合，讓你可以在前端快速上手。

實際演練

接下來，我們來看如何使用 i18next-http-backend 來處理翻譯資料的動態載入。

Step 1: 安裝 `i18next-http-backend`

首先，你需要安裝以下的插件：

npm install i18next-http-backend dotenv-webpack

Step 2: 更新`webpack.config.js`文件

接下來，修改 webpack.config.js 使用 dotenv-webpack 來從 .env 文件中自動讀取變數並注入到 Webpack 中：

const Dotenv = require('dotenv-webpack');

module.exports = {
   plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html' }),
        new webpack.DefinePlugin({
            'process.env.REACT_APP_VERSION': JSON.stringify(require("./package.json").version),
        }),
        new Dotenv(),
   ],
};

Step 3: 創建 `.env` 文件

在專案的根目錄中創建一個 .env 文件，並在其中定義 API 的 URL：

REACT_APP_I18N_API_URL=https://your-server-url/api/translations?lang=

Step 4: 設定 `i18next` 並整合 `i18next-http-backend`

接下來，我們將設定 i18next 並使用 i18next-http-backend 來動態獲取翻譯資料。

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpApi from 'i18next-http-backend';
import config from '@/utils/config';
import { log } from '@/utils/log';

i18n
    .use(HttpApi)  // 使用 i18next-http-backend
    .use(initReactI18next)
    .init({
        lng: "en", // 預設語言
        fallbackLng: "en", // 找不到語言時回退語言
        debug: config.featureFlags.enableLogging && config.logLevel === logLevel.DEBUG,  // 只有當 logLevel 設置為 DEBUG 時，啟用 debug 模式
        interpolation: {
            escapeValue: false, // React 已經防止了 XSS 攻擊
        },
        useSuspense: false,
        backend: {
            loadPath: (languages, namespaces) => {
                const path = `${process.env.REACT_APP_I18N_API_URL}?lang=${languages[0]}`;
                log(logLevel.DEBUG, `Dynamically generated loadPath: ${path}`);  // 打印 loadPath
                return path;
            },

        },
    });

export default i18n;

說明：

backend.loadPath：這是從後端伺服器獲取翻譯資料的 API URL。語言資料會根據當前選擇的語言動態加載。
環境變數：使用 .env 文件中的 REACT_APP_I18N_API_URL 變數來設定 API 路徑。

Step 5: 在 React 應用中使用翻譯

在設定好 i18next-http-backend 後，你可以在 React 應用中像之前一樣使用 t 函數來進行翻譯。

// src/pages/Portfolio/ProjectSection.jsx
import React, { useState } from 'react';
import * as styles from '@/pages/Portfolio/ProjectSection.module.scss';
import { Trans, useTranslation } from 'react-i18next';
import Swiper from '@/shared/Swiper/Swiper';

const ProjectSection = ({ id }) => {
    const { t, i18n } = useTranslation();
    const projectData = t('projectData', { returnObjects: true });  // 獲取服務數據

    return (
        <div id={id} className={`${styles.projectContainer} ${i18n.language}`}>
            <div className={styles.titleSection}>
                <h2 className={styles.title}>My Projects</h2>
                <img src={require(`@/assets/icons/JS.png`)} />
            </div>
            <Swiper
                items={projectData}
                loop={false}           // 支援無限循環
                autoplay={false}       // 自動播放
                delay={4000}          // 延遲 4 秒切換
                direction="horizontal"  // 水平滑動
                onSlideChange={(currentIndex) => {
                    console.log(`Active slide is: ${currentIndex + 1}`);
                }}
            />
        </div>
    );
};

export default ProjectSection;

這段代碼展示了如何在 React 中使用從 API 動態加載的翻譯資料來填充頁面內容。